/*
  创建区域面
  @params {
    options: {
      // 样式配置
      style: {
        zIndex number (default 10) 多边形覆盖物的叠加顺序。地图上存在多个多边形覆盖物叠加时，通过该属性使级别较高的多边形覆盖物在上层显示
        bubble boolean (default false) 是否将覆盖物的鼠标或touch等事件冒泡到地图上（自v1.3 新增）
        cursor string? 指定鼠标悬停时的鼠标样式，自定义cursor，IE仅支持cur/ani/ico格式，Opera不支持自定义cursor
        strokeColor string (default #00D3FC) 线条颜色，使用16进制颜色代码赋值。默认值为#00D3FC
        strokeOpacity number (default 0.9) 轮廓线透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.9
        strokeWeight number (default 2) 轮廓线宽度
        fillColor string (default #00B2D5) 多边形填充颜色，使用16进制颜色代码赋值，如：#00B2D5
        fillOpacity number (default 0.5) 多边形填充透明度，取值范围 [0,1] ，0表示完全透明，1表示不透明。默认为0.5
        draggable boolean (default false) 设置多边形是否可拖拽移动，默认为false
        extData object? 用户自定义属性，支持JavaScript API任意数据类型，如Polygon的id等
        strokeStyle ("solid" | "dashed") (default solid) 轮廓线样式，实线:solid，虚线:dashed
        strokeDasharray Array<number>? 勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在ie9+浏览器有效 取值： 实线： [0,0,0] 虚线： [10,10] ， [10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线 点画线： [10,2,10] ， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实线和10个像素的空白 （如此反复）组成的虚线
      },
      // 选中样式
      select: {
        // 同 style
      }
      // 鼠标移入样式
      select: {
        // 同 style
      }
    },
    geoJSON utils-> GeoJSON()处理过的geoJSON数据
  }
*/

import { createText } from './createText';

export function createPolygon(config, options = { style: {}, label: { style: {} } }, geoJSON, cb) {
  // const arg = arguments[0];
  // if (!(arg instanceof Object && arg.hasOwnProperty('map') && arg.hasOwnProperty('AMap'))) {
  //   geoJSON = config;
  // }
  const { AMap, map } = config;
  const PolygonGroup = [];
  geoJSON.forEach(e => {
    const Polygon = new AMap.Polygon({
      path: e.lnglat,
      extData: {
        data: e.data,
        lnglat: e.lnglat
      },
      ...options.style
      // zIndex: 500,
      // draggable: true
    });
    PolygonGroup.push(Polygon);

    if (options.label && options.label.enable) {
      // 默认值
      const style = {
        ...{
          'background-color': 'transparent',
          'text-align': 'center',
          'border': 'none',
          'color': 'white',
          'font-size': '14px',
          'font-weight': 600
        },
        ...options.label.style
      };

      const label = {
        text: e.data.name,
        anchor: 'bottom-center',
        position: e.data.centroid,
        offset: new AMap.Pixel(0, 10),
        ...options.label,
        // clickable: false,
        style
      };

      createText(config, {
        ...label
      });
    }
  });

  map.add(PolygonGroup);

  const OverlayGroup = new AMap.OverlayGroup(PolygonGroup);

  if (options.select && options.select.enable) {
    OverlayGroup.on('click', function(e) {
      if (!options.select.hideStyle) {
        clearPolygonColor(OverlayGroup, options.style);
        e.target.setOptions({
          ...options.select
        });
      }
      cb(e.target, 'click');
    });
  }
  if (options.hover && options.hover.enable) {
    OverlayGroup.on('mouseover', function(e) {
      clearPolygonColor(OverlayGroup, options.style);
      e.target.setOptions({
        ...options.hover
      });
      cb(e.target, 'mouseover');
    });
    OverlayGroup.on('mouseout', function(e) {
      if (options.mouseoutClear) {
        clearPolygonColor(OverlayGroup, options.style);
        cb(e.target, 'mouseout');
      }
    });
  }

  return OverlayGroup;
}

export function clearPolygonColor(PolygonGroup, style) {
  PolygonGroup.setOptions({
    ...style
  });
}
